<!DOCTYPE html>
<html>
<head>
    <!-- 声明编码格式 -->
    <meta charset="utf-8">
    <!-- 
        自适应手机屏幕适配： 
          页面宽度为设备屏幕宽度width=device-width、用户是否可以调整缩放比例user-scalable=no 
          初始的缩放比例initial-scale=1.0、最小缩放比例minimum-scale=0.5、
          最大缩放比例maximum-scale=1.0（选填可不加）
    -->
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0">
    <!-- 网站作者 -->
    <meta name="author" content="作者名、昵称、代号等">
    <!-- 网站描述 -->
    <meta name="description" content="本网站为...类型网站，主要服务对象为...">
    <!-- 网站关键词 -->
    <meta name="keywords" content="关键词1，关键词2，...">
    <!-- 禁止链接高亮 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- format-detection为格式检测 -->
    <!-- 禁止手机自动将网页中的电话号码显示为拨号的超链接 -->
    <meta name="format-detection" content="telephone=no">
    <!-- 告诉设备不识别邮箱，点击之后不自动发送 -->
    <meta name="format-detection" content="email=no">
    <!-- 禁止跳转至地图功能页面 -->
    <meta name="format-detection" content="adress=no">
    <!-- UC强制竖屏 -->
    <meta name="screen-orientation" content="portrait"> 
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!-- 优先使用 IE 最新版本和 Chrome进行渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <!-- 网页标题 -->
    <title>网页标题</title>
    <!-- 移动端初始化样式表 -->
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <!-- 引入flexible.js或者flexible_simplify.js精简版，解决rem适配与机型计算问题 -->
    <script type="text/javascript" src="./flexible.js"></script>
    <!-- 引入fastClick插件解决移动端点击300ms延迟问题 -->
    <script type="text/javascript" src="./fastclick.js"></script>
    <!-- 实例化fastclick -->
    <script type="text/javascript">
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
    </script>
</head>
<body>
    <div id="mybody" style="height: 300px;background-color: #6D7273"></div>
    <script>
    var mybody = document.getElementById('mybody');
    var startX, startY, moveEndX, moveEndY, X, Y;

    mybody.addEventListener('touchstart', function (e) {
        e.preventDefault();
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
    }, false);

    mybody.addEventListener('touchmove', function (e) {
        e.preventDefault();
        moveEndX = e.changedTouches[0].pageX;
        moveEndY = e.changedTouches[0].pageY;
    });

/**
* 在实际的操作中，手指的上下滑动很难做到直上直下，只要稍微有点斜，
* 只要稍微有点斜，就会被X轴的判断先行接管，而与我们实际的操作意愿相背离,
* 此时就需要添加特殊的判断技巧--绝对值进行对比
*/
    mybody.addEventListener('touchend', function (e) {
        e.preventDefault();
        X = moveEndX - startX;
        Y = moveEndY - startY;
        if (Math.abs(X) > Math.abs(Y) && X > 0) {
            alert("向右");
        }
        else if (Math.abs(X) > Math.abs(Y) && X < 0) {
            alert("向左");
        }
        else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
            alert("向下");
        }
        else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
            alert("向上");
        }
        else {
            alert("没滑动");
        }
    });

</script>
</body>
</html>